<template>
  <div class="PackageDesign">
    <Search></Search>
    <!-- 测一测 -->
    <div class="lc-teststyle">
      <p>测测什么风格适合你</p>
      <button>点击测一测</button>
    </div>
    <!-- 主体内容 -->
    <van-card
      v-for="item in designlist"
      :key="item.design_id"
      :desc="item.design_desc"
      :title="item.design_title"
      :thumb="item.design_img"
    >
      <template #price>
        <div class="lc-price">{{ item.design_price }}</div>
      </template>
      <template #bottom>
        <button class="lc-zixun">我要咨询</button>
      </template>
    </van-card>
    <van-loading
      size="24px"
      v-if="isLoading"
      >加载中...</van-loading
    >
    <button
      class="btn"
      v-else
      type="primary"
      block
      @click="getMores"
    >
      {{ moreText }}
    </button>
  </div>
</template>

<script>
import { getDesign } from '@/api/designs';
import Search from '@/components/Search';
export default {
  components: {
    Search,
  },
  data() {
    return {
      hasMore: false,
      isLoading: false,
      // page: 0,
      // limit: 4,
      designlist: [],
    };
  },
  created() {
    this.getDesign();
  },
  methods: {
    async getDesign() {
      //当数据达到零界点的时候将直接return跳出
      // if (this.hasMore !== false) return;
      // ++this.page;
      const res = await getDesign(); //{ page: this.page, limit: this.limit }
      this.designlist = res.data;
      // 上一页和下一页数据进行拼接
      // this.designlist = [...this.designlist, ...res.data];
      // // 计算数据请求的临界点
      //this.hasMore = this.page * this.limit > this.designlist.length;
    },
    getMores() {
      this.isLoading = true;
      setTimeout(() => {
        this.getDesign();
        this.isLoading = false;
      }, 500);
    },
  },
  computed: {
    moreText() {
      return this.hasMore ? '我也是有底线的' : '加载更多';
    },
  },
};
</script>
<style lang="scss">
.PackageDesign {
  margin-top: 46px;
  .lc-teststyle {
    width: 355px;
    height: 104px;
    background: url('https://img2.baidu.com/it/u=4223136793,3740756979&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500');
    background-color: rgb(238, 234, 234);
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
    p {
      width: 180px;
      height: 29px;
      color: rgba(130, 126, 126, 100);
      font-size: 20px;
      text-align: left;
      margin: 17px 0 17px 17px;
    }
    button {
      width: 92px;
      height: 29px;
      line-height: 20px;
      border-radius: 30px;
      background-color: rgba(206, 206, 206, 100);
      color: rgba(130, 126, 126, 100);
      font-size: 14px;
      margin-left: 40px;
      text-align: center;
      border: none;
    }
  }
  .van-card {
    width: 363px;
    height: 158px;
    margin: 14px auto;
    line-height: 20px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 100);
    text-align: center;
    box-shadow: 2px 2px 6px 0px #cac7c769;
    padding: 8px 0px 8px 16px;
    .van-card__thumb {
      width: 161px;
      height: 113px;

      .van-image {
        margin: 17px 0 20px 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .van-card__content {
      margin: 17px 2px 20px 7px;
      & div {
        color: rgba(130, 126, 126, 100);
        text-align: left;
      }
      .van-card__title {
        height: 26px;
        line-height: 23px;
        font-size: 18px;
      }
      .van-card__desc {
        font-size: 13px;
      }
      .lc-price {
        margin: 6px 0;
      }
      .lc-zixun {
        width: 92px;
        height: 29px;
        line-height: 20px;
        border-radius: 10px;
        background-color: rgba(217, 217, 217, 100);
        font-size: 14px;
        text-align: center;
        border: none;
      }
    }
  }

  .btn {
    width: 100%;
    outline: none;
    border: 0;
    background-color: #fff;
    font-size: 12px;
    color: #969799;
    margin-bottom: 5px;
  }
  .van-loading {
    text-align: center;
  }
}
</style>
